<template>
  <div class="list-item-container">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(image, index) in images" :key="index" class="swipe-item">
        <img
          :src="image"
          alt="banner"
          class="swipe-image"
          @click="handleImageClick(image, index)"
        />
      </van-swipe-item>
      <template #indicator="{ active, total }">
        <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
      </template>
    </van-swipe>
    <div v-if="isHidden" class="lsf_icon1"  style="z-index: 1000; padding-top: 10rem;padding-bottom: 5rem; background-color: white;">
      <div class="lsf_left">
        <button class="icon-button">
          <van-icon style="color: white" name="arrow-left" @click="goBack" />
        </button>
      </div>
      <div class="lsf_right">
        <button class="icon-button">
          <img
            src="https://mall.leyifan.com/static/h5/new_images/goods_search_active.png"
            alt=""
            @click="gotosearch"
          />
        </button>
        <button class="icon-button">
          <img
            src="https://mall.leyifan.com/static/h5/new_images/goods_translate_cn_active.png"
            alt=""
          />
        </button>
        <button class="icon-button">
          <img src="https://mall.leyifan.com/static/h5/new_images/goods_share_active.png" alt="" />
        </button>
        <button class="icon-button">
          <van-popover v-model:show="showPopover" :actions="actions" placement="bottom-end">
            <template #reference>
              <img
                src="https://mall.leyifan.com/static/h5/new_images/goods_add_active.png"
                alt=""
              />
            </template>
            <template #action="{ action }">
              <div @click="handleActionClick(action)" style="display: flex; align-items: center">
                <img
                  :src="action.icon"
                  alt=""
                  style="width: 16rem; height: 16rem; margin-right: 5rem"
                />
                <span>{{ action.text }}</span>
              </div>
            </template>
          </van-popover>
        </button>
      </div>
    </div>
    <div class="lsf_icon" v-else  style="z-index: 1000; padding-top: 10rem">
      <div class="lsf_left">
        <button class="icon-button">
          <van-icon style="color: white" name="arrow-left" @click="goBack" />
        </button>
      </div>
      <div class="lsf_right">
        <button class="icon-button">
          <img
            src="https://mall.leyifan.com/static/h5/new_images/goods_search_active.png"
            alt=""
            @click="gotosearch"
          />
        </button>
        <button class="icon-button">
          <img
            src="https://mall.leyifan.com/static/h5/new_images/goods_translate_cn_active.png"
            alt=""
          />
        </button>
        <button class="icon-button">
          <img src="https://mall.leyifan.com/static/h5/new_images/goods_share_active.png" alt="" />
        </button>
        <button class="icon-button">
          <van-popover v-model:show="showPopover" :actions="actions" placement="bottom-end">
            <template #reference>
              <img
                src="https://mall.leyifan.com/static/h5/new_images/goods_add_active.png"
                alt=""
              />
            </template>
            <template #action="{ action }">
              <div @click="handleActionClick(action)" style="display: flex; align-items: center">
                <img
                  :src="action.icon"
                  alt=""
                  style="width: 16rem; height: 16rem; margin-right: 5rem"
                />
                <span>{{ action.text }}</span>
              </div>
            </template>
          </van-popover>
        </button>
      </div>
    </div>
    <div class="info-section">
      <div>
        <span class="store-name">
          {{ List?.storeName }}
        </span>
        <img
          src="https://mall.leyifan.com/static/h5/new_images/icon_copy.png"
          alt=""
          class="copy-icon"
        />
      </div>
      <div class="price-info">
        <span class="price">{{ List?.price }}</span>
        <span class="currency">日元</span>
        <span class="converted-price">(約{{ List?.convertPrice }}人名币)</span>
      </div>
      <div class="exchange-rate">
        <span>当前汇率</span>
        <span>1日元 ≈ {{ List?.rate }}元</span>
      </div>
      <div class="product-details">
        <div>
          <span class="product-id">商品ID: {{ List?.externalProductId }}</span>
        </div>
        <div>
          <span class="desired-count">{{ List?.cateId }}人想要</span>
        </div>
      </div>
    </div>
    <div class="status-section">
      <div class="status-tags">
        <span class="tag mercari">mercari</span>
        <span class="tag on-sale">销售中</span>
        <span class="tag new-unused">新.未使用</span>
        <img
          src="https://mall.leyifan.com/static/h5/new_images/goods_warning.png"
          alt=""
          class="warning-icon"
        />
      </div>
      <div class="update-time">
        <span>33天前商品更新</span>
      </div>
    </div>
    <div class="specifications-section">
      <van-cell title="可选规格" is-link @click="showPopup" class="specifications-cell" />
      <van-popup
        v-model:show="showBottom"
        closeable
        round
        position="bottom"
        :style="{ height: '40vh' }"
      >
        <div v-for="(image, index) in images.slice(0, 1)" :key="index" class="popup-item">
          <img :src="image" alt="banner" class="popup-image" @click="handleImageClick(image)" />
          <div class="popup-details">
            <div>
              <span class="popup-price">{{ List?.price }} </span>
              <span class="popup-currency">日元 </span>
              <span class="popup-converted-price">(約{{ List?.convertPrice }}人民币)</span>
            </div>
            <p class="stock-info">库存: 1</p>
          </div>
        </div>
        <div style="padding: 16rem; font-size: 13rem">
          <p>规格</p>
          <span
            style="
              border-radius: 8rem;
              padding: 6rem 16rem;
              display: inline-block;
              background-color: rgba(255, 61, 88, 0.1);
              color: #ff3d58;
            "
            >默认</span
          >
        </div>
        <div style="padding: 0 16rem; display: flex; justify-content: space-between">
          <span>数量</span>
          <van-stepper v-model="value" style="background-color: transparent !important" />
        </div>
      </van-popup>
    </div>
    <div class="shipping-section">
      <div class="shipping-info">
        <span class="shipping-label">日本国内运货</span>
        <span class="shipping-cost">由买家承担(包邮)</span>
      </div>
      <div class="shipping-provider">
        <img src="../assets/download.png" alt="" />
        <p class="provider-name">有保障的物流「らくらくメルカリ便】</p>
      </div>
      <div class="handling-fee">
        <span class="fee-label">代切手续费</span>
        <span class="fee-value">公测期间手续费</span>
      </div>
      <div class="international-shipping">
        <span class="fee-label">国际物流费</span>
        <span class="fee-value">到仓称重结算</span>
      </div>
      <div class="shipping-details">
        <img
          style="width: 10rem"
          src="https://mall.leyifan.com/static/h5/new_images/icon_time.png"
          alt=""
        />
        <span class="duration">{{ items?.shippingDuration }}</span> |
        <img
          style="width: 10rem"
          src="https://mall.leyifan.com/static/h5/new_images/icon_transport.png"
          alt=""
        />
        <span class="origin">发货地区:{{ items?.shippingFromArea }}</span> |
        <span class="category">品类: </span
        ><span
          >{{ items?.categoryTree?.name || '未知' }}/
          {{ items?.categoryTree?.child?.[0]?.name || '未知' }}</span
        >
        <van-icon name="arrow" />
      </div>
    </div>
    <div style="width: 100vw; height: 10rem; background-color: #f5f5f5"></div>
    <div style="width: 100vw; height: 179rem; padding: 20rem 14rem">
      <h3 style="font-size: 15rem; font-weight: 700">代购流程</h3>
      <img
        style="width: 100%; height: 106rem; margin-top: 14rem"
        src="../assets/gouwu.png"
        alt=""
      />
    </div>
    <div style="width: 100vw; height: 10rem; background-color: #f5f5f5"></div>
    <!-- 卖家店铺 -->
    <div @click="goMessage()">
      <div style="padding: 20rem 14rem; display: flex">
        <img style="width: 48rem; height: 48rem; border-radius: 50%" :src="personal" alt="" />
        <div>
          <div style="display: flex; margin-left: 10rem; align-items: center">
            <div style="width: 60vw">
              <p style="font-size: 14rem">{{ lsfitem?.name }}</p>
              <div
                style="
                  display: inline-block;
                  border-radius: 8rem;
                  background-color: rgba(37, 203, 149, 0.16);
                  color: rgb(37, 203, 149);
                "
              >
                <img
                  style="width: 10rem"
                  src="https://mall.leyifan.com/static/h5/new_images/icon_auth_yes.png"
                  alt=""
                />
                <span style="font-size: 10rem">已认证</span>
              </div>
            </div>
            <p
              style="
                font-size: 12rem;
                padding: 5rem 8rem;
                font-size: 12rem;
                background-color: #ff3d58;
                color: white;
                border-radius: 20rem;
              "
            >
              进入店铺
            </p>
          </div>
        </div>
      </div>
      <div style="padding: 0 70rem; font-size: 12rem; display: flex; justify-content: space-evenly">
        <span style="color: #999">商品数:</span>
        <span style="font-weight: 700"> {{ lsfitem?.numSellItems }} ></span> |
        <div @click.stop="PingLun()" style="z-index: 100">
          <span style="color: #999">好评:</span>
          <span style="font-weight: 700; color: red"> {{ lsfitem?.ratings?.good }} > </span> |
          <span style="color: #999"> 差评: </span>
          <span style="font-weight: 700">{{ lsfitem?.ratings?.bad }} ></span>
        </div>
      </div>
      <div style="padding: 20rem 14rem">
        <button
          style="
            text-align: center;
            font-size: 12rem;
            width: 100%;
            border-radius: 30rem;
            height: 34rem;
            border: 1rem solid #999;
            background-color: transparent;
          "
          @click.stop="toggleCollectPeople"
        >
          {{ isCollectedPeople ? '已收藏' : '收藏卖家' }}
        </button>
      </div>
    </div>
    <div style="width: 100vw; height: 10rem; background-color: #f5f5f5"></div>

    <van-tabs v-model:active="active" style="padding: 8rem 14rem 20rem 14rem">
      <van-tab title="产品详情">
        <ul>
          <li v-for="(wenben, index) in wenben" :key="index" style="font-size: 13rem">
            {{ wenben }}
          </li>
          <button
            style="
              margin-top: 10rem;
              width: 100%;
              height: 41rem;
              background-color: #f5f5f5;
              border: 0;
              border-radius: 20rem;
              font-size: 13rem;
            "
            @click="copyText(wenben.join('\n'))"
          >
            复制产品详情
          </button>
        </ul>
      </van-tab>
      <van-tab title="卖家简介">
        <ul>
          <li v-for="(sj, index) in jianli" :key="index" style="font-size: 13rem">{{ sj }}</li>
          <button
            style="
              margin-top: 10rem;
              width: 100%;
              height: 41rem;
              background-color: #f5f5f5;
              border: 0;
              border-radius: 20rem;
              font-size: 13rem;
            "
            @click="copyText(wenben.join('\n'))"
          >
            复制产品详情
          </button>
        </ul>
      </van-tab>
    </van-tabs>
    <div style="width: 100vw; height: 10rem; background-color: #f5f5f5"></div>
    <div style="padding: 20rem 0 40rem 0">
      <div
        style="
          width: 100vw;
          height: 43rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 12rem;
        "
      >
        <p style="font-size: 15rem">用户留言(0)</p>
        <van-cell
          title="我要留言"
          style="
            padding: 0;
            width: 80rem;
            height: 30rem;
            background-color: red;
            color: white;
            border-radius: 20rem;
            font-size: 12rem;
            text-align: center;
            line-height: 30rem;
          "
          @click="handleClose"
        />
        <van-popup
          v-model:show="showTop"
          round
          closeable
          position="bottom"
          :style="{ height: '60%' }"
        />
      </div>
      <div style="text-align: center">
        <img
          style="width: 55rem"
          src="https://mall.leyifan.com/static/h5/new_images/leave_empty.png"
          alt=""
        />
        <p style="font-size: 12rem; color: #aaa">还没有人留言，你来说两句~</p>
      </div>
    </div>
    <div style="width: 100vw; height: 10rem; background-color: #f5f5f5"></div>
    <div style="padding: 20rem 14rem 20rem 0">
      <h2 style="font-weight: 700; padding-left: 14rem">商品推荐</h2>
      <div class="homerecommendlist">
        <HomeCommendItem
          v-for="(item, index) in tupian"
          :key="index"
          :item="item"
          class="thisitem"
          @click="changedetail(item.soureLink)"
        ></HomeCommendItem>
      </div>
    </div>
    <van-action-bar style="z-index: 10000; position: fixed; bottom: 0; left: 0">
      <van-action-bar-icon icon="https://mall.leyifan.com/static/h5/new_images/icon_kf.png?v=1" text="客服" color="#ee0a24" />
      <van-action-bar-icon
        :icon="isCollected ?'	https://mall.leyifan.com/static/h5/new_images/icon_collect.png?v=1':'https://mall.leyifan.com/static/h5/new_images/icon_no_collect.png?v=1'"
        :text="isCollected ? '已收藏' : '收藏'"
        :color="isCollected ? 'red' : '#666'"
        @click="toggleCollect()"
      />
      <van-badge :content="num" >
        <van-action-bar-icon icon="	https://mall.leyifan.com/static/h5/new_images/icon_card.png?v=1" text="购物车" />
</van-badge>
      
      <van-action-bar-button type="warning" text="加入购物车" @click="addToCart()" />
      <van-action-bar-button type="danger" text="立即购买" @click="buy()" />
    </van-action-bar>
    <div class="back-to-top" @click="scrollToTop" v-if="showBackToTop">
      <van-icon name="back-top" />
    </div>
  </div>
</template>
  
<script setup lang="ts">
import { ref, type Ref, onMounted, watch ,onUnmounted } from 'vue'
import axios from '@/api/axios'
import { useRoute } from 'vue-router'
import { showImagePreview, showNotify} from 'vant'
import router from '@/router'

window.scrollTo(0, 0)
const isCollected = ref(false)
const isCollectedPeople = ref(false)
import HomeCommendItem from '@/components/HomeCommendItem.vue'
import { useCartStore } from '@/stores/useCartStore' // 引入 Pinia store
import { useCollectionStore } from '@/stores/useCollectionStore' // 引入 Pinia store
import { useCollectionStorePeople } from '@/stores/useCollectionStorePeople' // 引入 Pinia store
// import { isHidden } from 'vant/lib/utils'
const cartStore = useCartStore() // 使用 Pinia store
const collectionStore = useCollectionStore() // 使用 Pinia store
const collectionStorePeople = useCollectionStorePeople() // 使用 Pinia store
collectionStore.initializeCollections()
collectionStorePeople.initializeCollections()
const active = ref(0) // 定义 active 属性
let num = ref(1)
const addToCart = () => {
  showNotify('已加入购物车');
  const item: CartItem = {
    id: route.query.id,
    item: items.value,
    num: value.value,
  }
  
  num.value = item.num
  cartStore.addToCart(item)
}

let List = ref([])
let items = ref([])
let images: Ref<any> = ref([])
let route = useRoute()
let storeId: Ref<any> = ref(null)
let showBottom = ref(false)
let showTop = ref(false)
let value = ref(1)
let personal: Ref<String> = ref('')
let lsfitem: Ref<any[]> = ref([])
let wenben: Ref<any[]> = ref([])
let jianli: Ref<any[]> = ref([])
let tupian: Ref<any> = ref([])
let showBackToTop = ref(false)
let showPopover = ref(false)



let isHidden = ref(true)
const actions = [
  {
    text: '首页',
    icon: 'https://mall.leyifan.com/static/h5/new_images/goods_more_home.png',
    path: '/',
  },
  {
    text: '购物车',
    icon: 'https://mall.leyifan.com/static/h5/new_images/goods_more_card.png',
    path: '/shoppingcart',
  },
  {
    text: '我的收藏',
    icon: 'https://mall.leyifan.com/static/h5/new_images/goods_more_colle.png',
    path: '/mycollect',
  },
  {
    text: '个人中心',
    icon: 'https://mall.leyifan.com/static/h5/new_images/goods_more_my.png',
    path: '/my',
  },
]
storeId.value = route.query.id
const handleActionClick = (action: { path: string }) => {
  router.push(action.path)
}
const buy = () => {
  router.push({
    path: '/placeorder',
    query: {
      id: route.query.id,
    },
  })
  console.log('11', route)
}
const changedetail = (id: string) => {
  router.replace({ path: '/listitem', query: { id } })
  storeId.value = id
  getstoredetail(id)
  getstorelist(id)
}

const goBack = () => {
  router.go(-1)
}

const goMessage = () => {
  router.push({ path: '/LsfFavoriteshops', query: { id: storeId.value } })
}

const PingLun = () => {
  router.push({ path: '/pinglun' })
}

const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth',
  })
}


const handleScroll = () => {
  const lsfIconElement = document.querySelector('.lsf_icon');
  if (window.scrollY > 300) {
    showBackToTop.value = true
    isHidden.value = true
    
  } else {
    showBackToTop.value = false
    isHidden.value = false
  }
}
// 
onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})

const copyText = async (text: string) => {
  try {
    await navigator.clipboard.writeText(text)
    showNotify({ type: 'success', message: '复制成功！' })
  } catch (err) {
    console.error('Failed to copy text: ', err)
  }
}

const toggleCollect = () => {
  if (route.query.id) {
    collectionStore.toggleCollection(route.query.id as string, items.value)
    isCollected.value = !isCollected.value
  }
}
const toggleCollectPeople = () => {
  if (route.query.id) {
    collectionStorePeople.toggleCollection(route.query.id as string, items.value.seller)
    isCollectedPeople.value = !isCollectedPeople.value
  }
}

let gotosearch = () => {
  router.push({ path: '/search' })
}

const getstoredetail = (id = route.query.id) => {
  axios
    .get(
      `https://api.mall.leyifan.com/api/front/products/mercari/detailV3?type=normal&url=https%3A%2F%2Fjp.mercari.com%2Fitem%2F${id}&id=${id}&itemType=mercari`
    )
    .then((res: any) => {
      items.value = res.data.data
      List.value = res.data.data.productInfo
      let wenzi: Ref<string> = res.data.data.productInfo.content
      let v = (wenzi + '').split('\n')
      wenben.value = v
      images.value = JSON.parse(res.data.data?.productInfo?.sliderImage)
      images.value = images.value.map((url: any) =>
        url.replace('https://static.mercdn.net', 'https://image1.leyifan.cn/mercari-cdn')
      )
      lsfitem.value = res.data.data?.seller
      let wenxi: string = res.data.data?.seller?.introduction
      let wenxi1 = wenxi.split('\n')
      jianli.value = wenxi1
      let src: string = res.data.data?.seller?.photoUrl
      src = src.replace('https://static.mercdn.net/', 'https://image1.leyifan.cn/mercari-cdn/')
      personal.value = src
    })
}

getstoredetail()

const getstorelist = (id = route.query.id) => {
  axios
    .get(
      `https://api.mall.leyifan.com/api/front/products/mercari/getMercariSimilarItemV2?itemId=${id}`
    )
    .then((res: any) => {
      tupian.value = res.data.data
    })
}

getstorelist()

const handleImageClick = (image: any, index: any) => {
  showImagePreview({
    images: images.value,
    startPosition: index,
  })
}

const showPopup = () => {
  showBottom.value = true // 控制弹出层显示
}

const handleClose = () => {
  showTop.value = true
}
watch(
  () => route.query.id,
  (newId) => {
    if (newId) {
      isCollected.value = !!collectionStore.collections[newId]
    }
  },
  { immediate: true }
)
watch(
  () => route.query.id,
  (newId) => {
    if (newId) {
      isCollectedPeople.value = !!collectionStorePeople.collections[newId]
    }
  },
  { immediate: true }
)
</script> 
<style scoped lang="less">
@base-padding: 14rem;
@base-margin: 10rem;
@base-font-size: 12rem;
@base-border-radius: 10rem;

.list-item-container {
  position: relative;
  padding-bottom: 100rem;
}

.my-swipe {
  width: 100vw;
  height: 100vw;
  object-fit: contain;
  background-color: white;
}

.swipe-item {
  display: flex;
  align-items: center;
  z-index: 10000000;
}

.swipe-image {
  display: block;
}

.custom-indicator {
  color: white;
  position: absolute;
  width: 44rem;
  right: 5rem;
  bottom: 5rem;
  padding: 0 8rem;
  border-radius: 5rem;
  font-size: 12rem;
  background: rgba(0, 0, 0, 0.5);
}

.lsf_icon {
  display: flex;
  position: fixed;
  padding: 0 @base-margin;
  top: 0;
  left: 0;
  width: 100vw;
  justify-content: space-between;
}
.lsf_icon1 {
  display: flex;
  position: fixed;
  padding: 0 @base-margin;
  top: 0;
  left: 0;
  width: 100vw;
  justify-content: space-between;
}

.hidden {
  display: none;
}


.icon-button {
  background-color: rgba(0, 0, 0, 0.5);
  border: 0;
  border-radius: @base-border-radius;
  width: 30rem;
  padding: 0;
  height: 30rem;
  margin-left: 10rem;
  img {
    width: 30rem;
  }
}

.info-section {
  padding: @base-padding;
}

.store-name {
  font-size: 15rem;
  font-weight: 400;
  line-height: normal;
}

.copy-icon {
  width: 14rem;
  height: 12rem;
  margin-left: 10rem;
}

.price-info {
  margin-top: 10rem;
}

.price {
  font-size: 18rem;
  color: red;
  font-weight: 700;
}

.currency {
  font-size: 12rem;
  color: red;
  font-weight: 700;
}

.converted-price {
  font-size: 12rem;
  margin-left: 10rem;
}

.exchange-rate {
  margin-top: 10rem;
  font-size: @base-font-size;
  color: #999;
}

.product-details {
  margin-top: 10rem;
  font-size: @base-font-size;
  color: #999;
  display: flex;
  justify-content: space-between;
}

.product-id {
  font-size: @base-font-size;
}

.desired-count {
  font-size: @base-font-size;
}

.status-section {
  display: flex;
  padding: 0 @base-margin;
  justify-content: space-between;
}

.status-tags {
  display: flex;
  align-items: center;
}

.tag {
  font-size: 11rem;
  border-radius: 6rem;
  padding: 3rem 6rem;
  color: white;
  background-color: rgb(255, 61, 88);
  &.on-sale {
    background-color: rgba(37, 203, 149, 0.16);
    color: rgb(37, 203, 149);
    margin-left: 6rem;
  }
  &.new-unused {
    background-color: rgba(37, 203, 149, 0.16);
    color: rgb(37, 203, 149);
    margin-left: 6rem;
  }
}

.warning-icon {
  width: 19rem;
  margin-left: 6rem;
}

.update-time {
  span {
    font-size: 11rem;
    color: #999;
  }
}

.specifications-section {
  padding: 0 @base-margin;
}

.specifications-cell {
  margin-top: 14rem;
  font-size: @base-font-size;
  background-color: #f5f5f5;
  color: #82848f;
  border-radius: @base-border-radius;
}

.specifications-popup {
  height: 40%;
}

.popup-item {
  display: flex;
  margin-top: 26rem;
  padding: 0 16rem;
}

.popup-image {
  border-radius: @base-border-radius;
  display: block;
  width: 70rem;
}

.popup-details {
  margin-left: 16rem;
}

.popup-price {
  color: red;
  font-size: 15rem;
}

.popup-currency {
  color: red;
  font-size: 10rem;
}

.popup-converted-price {
  font-size: 10rem;
  color: #999;
}

.stock-info {
  font-size: @base-font-size;
  color: #999;
}

.shipping-section {
  margin: @base-margin @base-margin 0 @base-margin;
  border-radius: @base-border-radius;
  padding: 16rem 10rem;
  background-color: #f5f5f5;
  height: 162rem;
  margin-bottom: 20rem;
}

.shipping-info {
  font-size: @base-font-size;
  display: flex;
  justify-content: space-between;
}

.shipping-label {
  color: #999;
}

.shipping-cost {
  color: #999;
}

.shipping-provider {
  position: relative;
}

.shipping-provider img {
  width: 100%;
}

.provider-name {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #25cb95;
  font-size: 9rem;
  z-index: 10;
  margin: 0;
  text-align: center;
  background-image: url(../assets/download.png);
}

.handling-fee {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8rem;
}

.fee-label {
  font-size: @base-font-size;
  color: #999;
}

.fee-value {
  font-size: @base-font-size;
}

.international-shipping {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8rem;
}

.shipping-details {
  font-size: 10rem;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding-top: 16rem;
}
.homerecommendlist {
  padding: 14rem;
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  .thisitem:nth-child(2n-1) {
    margin-right: 13rem;
  }
}

.duration {
  margin-right: 1rem;
}

.origin {
  margin-right: 1rem;
}

.category {
  margin-right: 1rem;
}

.back-to-top {
  position: fixed;
  bottom: 200rem;
  right: 10rem;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  width: 40rem;
  height: 40rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  .van-icon {
    color: white;
    font-size: 20rem;
  }
}
</style>